<template>
	<view class="bi-commerce-company-select" @click="handleClick">
		<view v-if="innerValue" class="bi-commerce-company-select__value">{{ innerValue }}</view>
		<view v-else class="bi-commerce-company-select__placeholder">输入关键词选择公司名称</view>
	</view>
</template>

<script>
	import { buildUrl } from '@/utils/url'
	import { unique } from '@/utils/string'
	import Event from '@/utils/event.js'
	
	export default {
		name: 'BiCommerceCompanySelect',
		props: {
			value: {
				type: String
			}
		},
		computed: {
			innerValue: {
				get () {
					return this.value
				},
				set (val) {
					this.$emit('input', val)
				}
			}
		},
		created () {
			this.id = unique('commerce-company-select_')
			Event.on(this.id, ({ selection }) => {
				if (selection && selection.length) {
					this.innerValue = selection[0].name
				} else {
					this.innerValue = ''
				}
			})
		},
		methods: {
			handleClick () {
				uni.navigateTo({
					url: buildUrl('/packages/common/commerce-company-select/commerce-company-select', {
						eventName: this.id,
						multiple: false
					})
				})
			}
		},
		beforeDestroy () {
			Event.off(this.id)
		}
	}
</script>

<style>
	.bi-commerce-company-select__placeholder{
		height: 24px;
		line-height: 24px;
		padding: 8px 0;
		color: #808080;
	}
</style>